<template>
  <div :id="id" :style="{ width: widthProp, height: heightProp }"></div>
</template>

<script>
export default {
  props: {
    widthProp: {
      type: String,
      default: "100%",
    },
    id: {
      type: String,
      default: "main2",
    },
    heightProp: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    this.EchartsPie();
  },
  watch: {
    data() {
      this.EchartsPie();
    },
  },
  methods: {
    EchartsPie() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main2对应
      let myChart = this.$echarts.init(document.getElementById(this.id));
      var option = {
        legend: {
          right: "0",
          orient: "vertical",
        },
        grid: {
          top: "10px",
          left: "10px",
          right: "10px",
          bottom: "0px",
          containLabel: true,
        },
        tooltip: {
          trigger: "item",
        },
        toolbox: {
          show: true,
        },
        series: [
          {
            type: "pie",
            radius: ["30%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },

            data: this.data,
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style></style>